<template>
    <div>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-input
                                placeholder="输入英文名"
                                v-model="page.qData.name"
                                size="small"
                                maxlength="10"
                                clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-input
                                placeholder="输入中文名"
                                v-model="page.qData.zhName"
                                size="small"
                                maxlength="10"
                                clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
                    </el-col>
                    <el-col :span="6">
                        <!-- 添加角色-->
                        <el-button type="text" @click="aData.visible = true">添加</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <div style="margin-top: 5px">
                    <el-table
                            :data="table.tableData"
                            v-loading="table.loading"
                            style="width: 100%">
                        <el-table-column
                                label="角色名"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="中文名"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.zhName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        @click="getAllMenus(scope.$index, scope.row)">权限</el-button>
                                <el-button
                                        size="mini"
                                        @click="getAllUsers(scope.$index, scope.row)">用户</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage.current"
                            :page-sizes="[7,14,21,28]"
                            :page-size="page.currentPage.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <!-- 弹出框-->
        <div class="app-dialog">
            <el-dialog title="新增角色信息" :visible.sync="aData.visible" width="30%">
                <el-form :model="aData.form" :rules="aData.rules" ref="aForm" v-loading="aData.loading">
                    <el-form-item label="角色名" prop="name" :label-width="formLabelWidth">
                        <el-input type="text" v-model="aData.form.name" autocomplete="off" placeholder="角色名"></el-input>
                    </el-form-item>
                    <el-form-item label="中文名" prop="zhName" :label-width="formLabelWidth">
                        <el-input type="text" v-model="aData.form.zhName" autocomplete="off" placeholder="中文名"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="aData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改角色信息" :visible.sync="uData.visible" width="30%">
                <el-form :model="uData.form" :rules="uData.rules" ref="uForm" v-loading="uData.loading">
                    <el-form-item label="角色名" prop="name" :label-width="formLabelWidth">
                        <el-input type="text" v-model="uData.form.name" autocomplete="off" placeholder="角色名"></el-input>
                    </el-form-item>
                    <el-form-item label="中文名" prop="zhName" :label-width="formLabelWidth">
                        <el-input type="text" v-model="uData.form.zhName" autocomplete="off" placeholder="中文名"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="uData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog
                    title="提示"
                    :visible.sync="dData.visible"
                    width="30%"
                    center>
                <span>您确定要删除角色: {{dData.form.name}}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="赋予角色权限" :visible.sync="mrbData.visible" v-loading="mrbData.loading" width="70%">
                <div style="text-align: center">
                    <el-transfer
                            style="text-align: left; display: inline-block"
                            v-model="mrbData.choice"
                            filterable
                            :titles="['所有权限', '该角色的权限']"
                            :button-texts="['到左边', '到右边']"
                            :format="{
                                noChecked: '${total}',
                                hasChecked: '${checked}/${total}'
                            }"
                            :data="mrbData.data">
                        <template slot-scope="{ option }">
                            <el-popover trigger="hover" placement="top">
                                <span>{{ option.key }} - {{ option.label }}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ option.key }} - {{ option.label }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-transfer>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="mrbData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="changeMenuForRole">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="赋予用户角色" :visible.sync="rubData.visible" v-loading="rubData.loading" width="70%">
                <div style="text-align: center">
                    <el-transfer
                            style="text-align: left; display: inline-block"
                            v-model="rubData.choice"
                            filterable
                            :titles="['所有用户', '该角色的用户']"
                            :button-texts="['到左边', '到右边']"
                            :format="{
                                noChecked: '${total}',
                                hasChecked: '${checked}/${total}'
                            }"
                            :data="rubData.data">
                        <template slot-scope="{ option }">
                            <el-popover trigger="hover" placement="top">
                                <span>{{ option.key }} - {{ option.label }}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ option.key }} - {{ option.label }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-transfer>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="rubData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="changeUserForRole">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "role",
        data() {
            return {
                //分页
                page: {
                    currentPage:{
                        current: 1,
                        size: 7,
                    },
                    total: 0,
                    qData:{
                        name:'',
                        zhName:'',
                    }
                },
                //表格
                table: {
                    tableData: [],
                    loading:false
                },
                //添加
                aData: {
                    visible: false,
                    loading: false,
                    form: {
                        name: '',
                        zhName: '',
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入角色名', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 个字符', trigger: 'blur' },
                            {
                                pattern: /(^ROLE_\w+)/,
                                message: '角色名应应以"ROLE_"开头',
                                trigger: 'blur'
                            }
                        ],
                        zhName: [
                            { required: true, message: '请输入角色中文名', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 ', trigger: 'blur' }
                        ]
                    }
                },
                //修改
                uData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        name: '',
                        zhName: '',
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入角色名', trigger: 'blur' },
                            { min: 5, message: '长度不少于 5 个字符', trigger: 'blur' },
                            {
                                pattern: /(^ROLE_\w+)/,
                                message: '角色名应应以"ROLE_"开头',
                                trigger: 'blur'
                            }
                        ],
                        zhName: [
                            { required: true, message: '请输入角色中文名', trigger: 'blur' },
                            { min: 2, message: '长度不少于 2 ', trigger: 'blur' }
                        ]
                    }
                },
                //删除
                dData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        name: '',
                    },
                },
                formLabelWidth: '120px',
                mrbData: {
                    visible: false,
                    loading: false,
                    data: [],
                    choice: [],
                    currentId: -1
                },
                rubData: {
                    visible: false,
                    loading: false,
                    data: [],
                    choice: [],
                    currentId: -1
                },
            }
        },
        methods: {
            //每页大小
            handleSizeChange(size) {
                console.log(`每页 ${size} 条`);
                this.page.currentPage.size=size;

                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let roleVo=this.page.currentPage;
                    this.loadTableData(roleVo);
                }
            },
            //当前页
            handleCurrentChange(current) {
                console.log(`当前页: ${current}`);
                this.page.currentPage.current=current;
                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let roleVo=this.page.currentPage;
                    this.loadTableData(roleVo);
                }
            },
            //修改
            handleEdit(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.uData.form=row;
                    this.uData.visible=true;
                }else {
                    //提角色修改信息
                    const _this = this;
                    this.$refs.uForm.validate((valid) => {
                        if (valid) {
                            _this.uData.loading=true;
                            let roleVo=_this.uData.form;
                            this.putRequestJson("/role/u",roleVo)
                                .then(resp =>{
                                    if (resp && resp.data && resp.data.code === '200') {
                                        _this.uData.loading=false;
                                        _this.uData.visible=false;
                                        //清空数据
                                        _this.uData.form={
                                            id: -1,
                                            name: '',
                                            zhName: '',
                                        };
                                        _this.handleSearch();
                                    }else {
                                        _this.uData.visible=false;
                                    }
                                })
                        }
                    });

                }
            },
            //删除
            handleDelete(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.dData.form.id=row.id;
                    this.dData.form.name=row.name;
                    this.dData.visible=true;
                }else {
                    //提交角色删除信息
                    const _this = this;
                    _this.dData.loading=true;
                    let ids=[];
                    ids.push(_this.dData.form.id);
                    this.deleteRequest("/role/d/"+ids)
                        .then(resp =>{
                            if (resp && resp.data && resp.data.code === '200') {
                                _this.dData.loading=false;
                                _this.dData.visible=false;
                                //清空数据
                                _this.dData.form={
                                    id: -1,
                                    name: '',
                                };
                                _this.handleSearch();
                            }else {
                                _this.dData.visible=false;
                            }
                        })
                }
            },
            //添加角色
            handleAdd(){
                const _this = this;
                this.$refs.aForm.validate((valid) => {
                    if (valid) {
                        _this.aData.loading=true;
                        let roleVo=_this.aData.form;
                        this.postRequestJson("/role/a",roleVo)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    _this.aData.loading=false;
                                    _this.aData.visible=false;
                                    //清空数据
                                    _this.aData.form.name='';
                                    _this.aData.form.zhName='';
                                    _this.handleSearch();
                                }else {
                                    _this.aData.visible=false;
                                }
                            })
                    }
                });

            },
            //搜索
            handleSearch(){
                let searchParam={
                    name: this.page.qData.name,
                    zhName: this.page.qData.zhName,
                    current: this.page.currentPage.current,
                    size: this.page.currentPage.size
                };
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/role/search",searchParam)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }
                    })
            },
            //装载角色
            loadTableData(roleVo){
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/role/g",roleVo)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
            getAllMenus(index, row){
                console.log(`当前索引: ${index}`);
                const _this = this;
                //当前id
                this.mrbData.currentId=row.id;
                _this.mrbData.visible = true;
                _this.mrbData.loading=true;
                //获取所有权限
                this.getRequest("/menu/gall")
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            const result = data.result;
                            const temp=[];
                            for (let i = 0; i < result.length; i++) {
                                temp.push({
                                    key: result[i].id,
                                    label: result[i].description+" : "+result[i].pattern
                                });
                            }
                            _this.mrbData.data=temp;
                            let params={
                                roleId:_this.mrbData.currentId
                            };
                            _this.getMenuIdByRoleId("/role/gmi",params);
                        }
                    })
            },
            changeMenuForRole(){
                console.log(this.mrbData.choice);
                //提交修改信息
                const _this = this;
                _this.mrbData.loading=true;
                let rList=[];
                rList.push(_this.mrbData.currentId);
                let mList=_this.mrbData.choice;
                let params={
                    rList: rList,
                    mList: mList
                };
                this.putRequest("/role/updatemrb",params)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            _this.mrbData.loading=false;
                            _this.mrbData.visible=false;
                            //清空数据
                            _this.mrbData.currentId=-1;
                            _this.mrbData.choice=[];
                        }else {
                            _this.mrbData.loading=false;
                        }
                    });
            },
            getMenuIdByRoleId(url,roleId){
                const _this = this;
                _this.getRequest(url,roleId)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.mrbData.choice=data.result;
                            _this.mrbData.loading=false;
                        }else {
                            _this.mrbData.loading=false;
                        }
                    });
            },
            getAllUsers(index, row){
                console.log(`当前索引: ${index}`);
                const _this = this;
                //当前id
                this.rubData.currentId=row.id;
                _this.rubData.visible = true;
                _this.rubData.loading=true;
                //获取所有用户
                this.getRequest("/user/gall")
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            const result = data.result;
                            const temp=[];
                            for (let i = 0; i < result.length; i++) {
                                temp.push({
                                    key: result[i].id,
                                    label: result[i].username
                                });
                            }
                            _this.rubData.data=temp;
                            let params={
                                roleId:_this.rubData.currentId
                            };
                            _this.getUserIdByRoleId("/role/gui",params);
                        }
                    })
            },
            changeUserForRole(){
                console.log(this.rubData.choice);
                //提交修改信息
                const _this = this;
                _this.rubData.loading=true;
                let rList=[];
                rList.push(_this.rubData.currentId);
                let uList=_this.rubData.choice;
                let params={
                    rList: rList,
                    uList: uList
                };
                this.putRequest("/role/updaterub",params)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            _this.rubData.loading=false;
                            _this.rubData.visible=false;
                            //清空数据
                            _this.rubData.currentId=-1;
                            _this.rubData.choice=[];
                        }else {
                            _this.rubData.loading=false;
                        }
                    });
            },
            getUserIdByRoleId(url,roleId){
                const _this = this;
                _this.getRequest(url,roleId)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.rubData.choice=data.result;
                            _this.rubData.loading=false;
                        }else {
                            _this.rubData.loading=false;
                        }
                    });
            }
        },
        mounted() {
            //装载第一页数据
            let roleVo = this.page.currentPage;
            this.loadTableData(roleVo);
        }
    }
</script>

<style scoped>

    .input-search {
        width: 150px;
        margin-left: 300px;
    }

    .input-form{
        width: 150px;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 150%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        align-content: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .transfer-footer {
        margin-left: 20px;
        padding: 6px 5px;
    }

    .app-dialog{
        z-index: 1000;
    }
</style>